<div class="z-slide-show">
    <div class="z-large-picture-container">
	<img src="/assets/img/z-ajax-loading.gif" class="z-large-picture" onabort="this.src=this.src;"/>
	<a href="javascript:void(0);" class="z-previous-button"></a>
	<a href="javascript:void(0);" class="z-next-button"></a>
	<div class="z-loading"><img src="/assets/img/z-ajax-loading.gif"/></div>
    </div>
    <div class="z-thumbnail-container">
	<table>
	    <tbody>
		<tr>
		    <?php foreach ($photos as $photo): ?>
    		    <td>
    			<a href="javascript:void(0);">
    			    <img src="/assets/uploads/<?php echo preg_replace("/\.(jpg|jpeg|gif|bmp|png)$/", '_thumb.$1', $photo->file_name); ?>" onload="window.alignImage(this,0,60)"/>
    			</a>
    		    </td>
		    <?php endforeach; ?>
		</tr>
	    </tbody>
	</table>
    </div>
    <a href="javascript:void(0);" class="z-previous-page-button"></a>
    <a href="javascript:void(0);" class="z-next-page-button"></a>
</div>
<script type="text/javascript">
    $(function(){
	new Z.SlideShow($('.z-slide-show:eq(0)'),650,433,0,60);
    });
</script>
<style type="text/css">
    .z-slide-show{position: relative;width:652px;height:504px;margin:0 auto;margin-bottom: 20px;}
    .z-slide-show .z-thumbnail-container{width:572px;overflow: hidden;position: absolute;bottom: 0;left:40px;}
    .z-slide-show .z-thumbnail-container table{border:none;margin:0;padding:0;border-spacing: 0;border-collapse: collapse;}
    .z-slide-show .z-thumbnail-container td{padding:0;margin:0;}
    .z-slide-show .z-thumbnail-container td a,
    .z-slide-show .z-thumbnail-container td a img{display: block;}
    .z-slide-show .z-thumbnail-container td a{height:60px;margin-right:5px;}
    .z-slide-show .z-large-picture-container{position: absolute;overflow: hidden;bottom: 71px;width:650px;height: 433px;border:1px solid #554c3a;}

    .z-slide-show .z-large-picture-container a.z-previous-button,
    .z-slide-show .z-large-picture-container a.z-next-button{
	background: url('/assets/img/transparent.png') 0 0 scroll repeat transparent;
	display: block;position: absolute;width:49%;height:100%;top:0;
	_background: url('/assets/img/transparent.gif') 0 0 scroll repeat transparent;}
    .z-slide-show .z-large-picture-container a.z-previous-button{left:0;}
    .z-slide-show .z-large-picture-container a.z-next-button{right:0;}

    .z-slide-show  a.z-next-page-button,
    .z-slide-show  a.z-previous-page-button{
	display: block;width:35px;height:60px;background-color: #554c3a;position: absolute;bottom: 0;}
    .z-slide-show  a.z-previous-page-button{left: 0;background: url('/assets/img/slide-show-prev-button-bg.jpg') center center scroll no-repeat transparent;}
    .z-slide-show  a.z-next-page-button{right: 0;background: url('/assets/img/slide-show-next-button-bg.jpg') center center scroll no-repeat transparent;}
</style>